<!--  -->
<template>
  <div class="layout">
    <div class="investment-box">
      <div
        style="display: flex; justify-content: space-between; margin-top: 20px"
      >
        <Breadcrumb
          class="breadcrumb"
          :crumbs="crumbs"
          style="margin-bottom: 20px"
        ></Breadcrumb>
        <!-- <div class="backBtn" @click="goBack()">返回列表</div> -->
      </div>
      <div class="head_Down">
        <div class="head_Name">{{ this.Details.title }}</div>
        <div class="content_Name">{{ this.Details.subtitle }}</div>
        <div class="date_Postmark">
          <div>发布时间:{{ publishTime }}</div>
          <div style="max-width: 250px; display: flex">
            <div style="width: 60px">来源:</div>
            <div
              style="
                max-width: 300px;
                white-space: normal;
                word-break: break-all;
                text-align: left;
              "
            >
              {{ this.Details.source }}
            </div>
          </div>
          <div>{{ this.Details.pv }}次浏览</div>
        </div>
        <div class="written_Name">
          <ContainerTitle text="关联楼宇"></ContainerTitle>
          <RelatedInformation
            :list="relatedInformationList"
            @reset="&quot;&quot;;"
          ></RelatedInformation>
        </div>
        <div class="paging">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[3, 6, 9, 12, 15]"
            :page-size="pageSize"
            layout="total,  prev, pager, next, sizes, jumper"
            :total="total"
          ></el-pagination>
        </div>
        <div class="moreDynamic">
          <div class="head">
            <ContainerTitle
              text="更多动态"
              :more="true"
              @jump="onMoreDynamic"
            ></ContainerTitle>
            <div class="More_Dynamic">
              <div class="whole">
                <div
                  class="allCarefully"
                  @click="onMoredynamic(item)"
                  v-for="(item, index) in More_DynamicList"
                  :key="index"
                >
                  <div class="picturewhole">
                    <PublicImage
                      v-if="item.logo == ''"
                      :src="require('@/assets/image/finance/product_dj.png')"
                      class="img"
                    ></PublicImage>
                    <PublicImage
                      v-else
                      :src="item.logo"
                      class="img"
                    ></PublicImage>
                  </div>
                  <div class="letter">
                    <div class="writtenWords">
                      <div class="head_Name">{{ item.title }}</div>
                      <div class="content_Name">{{ item.subtitle }}</div>
                    </div>
                    <div class="SourceLetter">
                      <div class="sourceCss">来源:{{ item.source }}</div>
                      <div class="dateCss">{{ item.publishTime }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ViewDetails">
          <!-- @click="back" -->
          <el-button class="contactBuilding" @click="onBuildings"
            >返回</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Breadcrumb from "@/components/breadcrumb";
import RelatedInformation from "./components/relatedInformation";
import { request } from "@/utils/request.js";
import { host } from "@/utils/config.js";
import { getAssociatedBuilding } from "@/common/api/investment"
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Breadcrumb,
    RelatedInformation,
  },
  data() {
    //这里存放数据
    return {
      pageNum: 1,
      pageSize: 6,
      total: null,
      crumbs: [
        {
          label: "招商中心",
          value: "investment",
        },
        { label: "楼宇动态列表", value: "investmenDynamictList" },
        {
          label: "楼宇动态详情",
          value: "investmenDynamictDetails?id=" + this.$route.query.id,
        },
        { label: "关联楼宇列表", value: "", choose: true },
      ],
      relatedInformationList: [],
      More_DynamicList: [],
      manylist: [], //楼宇类型
      Details: "", //楼宇动态详情
      publishTime: "", //发布时间
      positionList: [], //位置
      typeList: [], //类型
      gradeList: [], //等级
      canRegisterList: [], //是否可注册
      buildingDecorationTypeList: [], //装修情况
      manylist: [], //楼宇类型
      industryTypeList: [], //楼宇产业领域
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onBuildings() {
      var id = this.$route.query.id;
      this.$router.push({
        path: "/investment/investmenDynamictDetails",
        query: { id: id },
      });
    },
    onMoredynamic(item) {
      this.$router.push({
        path: "/investment/investmenDynamictDetails",
        query: { id: item.id },
      });
    },
    onJump(item) {
      this.$router.push({
        path: "/investment/investmentdetails",
        query: { id: item.id },
      });
    },
    // back() {},
    //返回更多动态
    onMoreDynamic() {
      this.$router.replace("/investment/investmenDynamictList");
    },
    handleSizeChange(e) {
      let that = this;
      that.pageSize = e;
      this.associatedBuildingList();
    },
    handleCurrentChange(e) {
      let that = this;
      that.pageNum = e;
      this.associatedBuildingList();
    },
    async associatedBuildingList() {
      var id = this.$route.query.id;
      var data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        buildingDynamicsId: id,
      };
      // let api = `${host}/building/investment/dynamics/relatedBuildingList`;
      let { code, msg, rows, total } = await getAssociatedBuilding(data)
      if (code != "200") return this.$message.warning(msg);
      this.total = total;
      this.relatedInformationList = rows;
      var classificationList = [];
      this.relatedInformationList.forEach((item, index) => {
        item.buildingImages = item.buildingImages.split(",");
        //等级
        this.gradeList.forEach((itemy, indexy) => {
          if (item.buildingLeave == Number(itemy.dictValue)) {
            item.Grade = itemy.dictLabel;
          }
        });
        //类型
        this.typeList.forEach((itemq, indexq) => {
          if (item.buildingType == Number(itemq.dictValue)) {
            item.buildingType = itemq.dictLabel;
          }
        });
        //装修情况
        this.buildingDecorationTypeList.forEach((itema, indexa) => {
          if (item.buildingDecorationType == Number(itema.dictValue)) {
            this.buildingDecorationType = itema.dictLabel;
            item.buildingDecorationType = itema.dictLabel;
          }
        });
        //是否可注册
        this.canRegisterList.forEach((items, indexs) => {
          if (item.canRegister == Number(items.dictValue)) {
            item.canRegister = items.dictLabel;
          }
        });
        //楼宇产业领域
        this.industryTypeList.forEach((itemr, indexx) => {
          if (item.industryType == Number(itemr.dictValue)) {
            item.industryType = itemr.dictLabel;
          }
        });
      });

      this.manylist = classificationList;
      // console.log(res)
    },
    async buildingDynamicsDetails() {
      var id = this.$route.query.id;
      let api = `${host}/building/investment/dynamics/get/` + id;
      let res = await request(this, api, {}, "GET");
      this.Details = res.data;
      var date = new Date(this.Details.publishTime);
      var N = date.getFullYear();
      var Y = date.getMonth() + 1;
      Y = Y < 10 ? "0" + Y : Y;
      var R = date.getDate();
      R = R < 10 ? "0" + R : R;
      this.publishTime = N + "年" + Y + "月" + R + "日";
    },
    //字典方法接口
    async dictionaryQuery() {
      let api = `building_type,building_leave,street_code,building_register_state,building_decoration_type,building_industry`;
      // 调用公共方法中的查询字典表
      this.getDictList(this, api).then((res) => {
        this.positionList = res.street_code; //位置
        this.typeList = res.building_type; //类型
        this.gradeList = res.building_leave; //等级
        this.canRegisterList = res.building_register_state; //是否可注册
        this.buildingDecorationTypeList = res.building_decoration_type; //装修情况
        this.industryTypeList = res.building_industry; //楼宇产业领域
        this.buildingDynamicsDetails();
        this.associatedBuildingList();
        this.dynamicRelatedRecommendation();
      });
    },
    async dynamicRelatedRecommendation() {
      var pageSize = 4;
      var pageNum = 1;
      var data = {
        pageSize: pageSize,
        pageNum: pageNum,
      };
      let api = `${host}/building/investment/dynamics/recommendationList`;
      let res = await request(this, api, data, "GET");
      this.More_DynamicList = res.rows;
      this.More_DynamicList.forEach((item, index) => {
        var date = new Date(item.publishTime);
        var N = date.getFullYear();
        var Y = date.getMonth() + 1;
        Y = Y < 10 ? "0" + Y : Y;
        var R = date.getDate();
        R = R < 10 ? "0" + R : R;
        item.publishTime = N + "年" + Y + "月" + R + "日";
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    this.dictionaryQuery();
    // this.buildingDynamicsDetails()
    // this.associatedBuildingList()
    // this.dynamicRelatedRecommendation()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.investment-box {
  width: 1200px;
  margin: 0 auto;
  .head_Down {
    .head_Name {
      font-size: 24px;
      font-weight: bold;
      color: #333333;
      text-align: left;
      margin-bottom: 10px;
      font-family: Source Han Sans CN, Source Han Sans CN-Bold;
    }
    .content_Name {
      font-size: 12px;
      color: #999999;
      text-align: left;
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      margin-bottom: 10px;
      white-space: normal;
      word-break: break-all;
      text-align: left;
    }
    .date_Postmark {
      font-size: 12px;
      color: #999999;
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      display: flex;
      width: 500px;
      justify-content: space-between;
    }
    .written_Name {
      font-size: 20px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: bold;
      color: #045db9;
      text-align: left;
      margin-top: 15px;
      .MoreDynamic {
        display: flex;
        justify-content: space-between;
      }
      .written_Words {
      }
      .moreName {
        font-size: 14px;
        color: #333333;
        font-family: Adobe Heiti Std, Adobe Heiti Std-R;
      }
      .relatedInformation {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
        justify-content: flex-start;
        .careful {
          border: 1px solid #cccccc;
          width: 386px;
          margin: 12px 0px;
          box-shadow: 4px 6px 2px 0px rgba(0, 19, 39, 0.06);
          margin-right: 12px;
          .pictureCss {
            height: 200px;
          }
          .img {
            height: 200px;
            width: 100%;
            object-fit: cover;
          }
          .photocopy {
            // box-shadow: 4px 6px 0px NaNpx rgba(0, 19, 39, 0.06);
          }
          .building_Information {
            font-size: 14px;
            color: #999999;
            display: flex;
            padding: 10px;
            flex-direction: column;
            align-items: flex-start;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;

            .DaxiaName {
              margin: 10px 0px;
              color: #333333;
              font-size: 18px;
              font-weight: bold;
              font-family: Source Han Sans CN, Source Han Sans CN-Bold;
              // white-space:normal;
              // word-break:break-all;
              text-align: left;
              width: 100%;
            }
            .option {
              margin-bottom: 10px;
              // white-space:normal;
              // word-break:break-all;
              text-align: left;
              width: 100%;
            }
            .option:last-of-type {
              margin-bottom: 0px;
            }
          }
          .many {
            display: flex;
            font-size: 14px;
            font-weight: 400;
            color: #045db9;
            padding: 0px 7px 10px 7px;
            // justify-content: space-between;
            // width: 300px;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            .multiple_Choice {
              width: 80px;
              height: 30px;
              border-radius: 3px;
              background-color: #f1f2f4;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 4px;
              .Choice_Name {
                // display: flex;
                // align-items: center;
                // justify-content: center;
                text-align: center;
                line-height: 30px;
                height: 30px;
                overflow: hidden;
              }
            }
          }
        }
      }
    }
  }
  .moreDynamic {
    .head {
      .MoreDynamic {
        display: flex;
        justify-content: space-between;
        .dynamicName {
          font-size: 20px;
          font-weight: bold;
          color: #045db9;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        }
        .moreName {
          font-size: 14px;
          color: #333333;
          font-family: Adobe Heiti Std, Adobe Heiti Std-R;
        }
      }
      .More_Dynamic {
        .whole {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .allCarefully {
            border: 1px solid #eeeeee;
            display: flex;
            padding: 15px;
            width: 48%;
            margin-bottom: 20px;
            .picturewhole {
              width: 140px;
              height: 139px;
              .img {
                width: 140px;
                height: 139px;
                object-fit: cover;
              }
            }
            .letter {
              width: 398px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              margin-left: 25px;
              .writtenWords {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                .head_Name {
                  font-size: 18px;
                  font-weight: bold;
                  color: #333333;
                  margin-bottom: 20px;
                  font-family: Source Han Sans CN, Source Han Sans CN-Bold;
                  white-space: normal;
                  word-break: break-all;
                  text-align: left;
                }
                .content_Name {
                  color: #999999;
                  font-size: 14px;
                  text-align: left;
                  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                  white-space: normal;
                  word-break: break-all;
                  text-align: left;
                }
              }
              .SourceLetter {
                display: flex;
                justify-content: space-between;
                font-size: 12px;
                font-weight: 400;
                font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                color: #999999;
                .sourceCss {
                  white-space: normal;
                  word-break: break-all;
                  text-align: left;
                }
                .dateCss {
                  min-width: 95px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
              }
            }
          }
        }
      }
    }
  }
  .ViewDetails {
    line-height: 160px;
    .contactBuilding {
      width: 120px;
      height: 40px;
      background: #f1f2f4;
      border-radius: 3px;
      color: #045db9;
    }
  }
  ::v-deep .el-divider--horizontal {
    margin: 10px 0;
    height: 2px;
    background-color: #045db9;
  }
  .paging {
    display: flex;
    justify-content: flex-end;
    line-height: 100px;
  }
}
</style>